<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>添加候选人</title>
	<link rel="stylesheet" href="../css/jquery.ui.core.css" />
	<link rel="stylesheet" href="../css/jquery.ui.datepicker.css" />
	<link rel="stylesheet" href="../css/jquery.ui.theme.css" />
	<link rel="stylesheet" href="../css/bootstrap.min.css" />
	<link rel="stylesheet" href="../css/jquery.validity.css" />
	<style type="text/css">
		body{
			background-image: url("../img/batthern.png");
		}
	</style>
</head>
<body>
	<%@ include file="include/top.jsp" %>

	<div class="container" style="margin-top: 60px;">
		<div class="row">
			<jsp:include page="include/left.jsp">
				<jsp:param value="addcandidate" name="tag"/>
			</jsp:include>
			<div class="span9">
				<div class="wall" style="min-height: 400px;" id="right">
				
				
				    <div class="tabbable">
					    <ul class="nav nav-tabs">
					    <li class="active"><a href="#tab1" data-toggle="tab" id="btn1">基本信息</a></li>
					    <li><a href="#tab2" data-toggle="tab" id="btn2">个人主页</a></li>
					    </ul>
				    <div class="tab-content">
					    <div class="tab-pane active" id="tab1">
					    	<div class="well">
								<div id="seeimg" style="display: none;">
									头像预览：<img width="100px" height="100px" src="" alt="" id="heraderimg"/><br/>
									图像名称：<span id="imgname"></span>
								</div>
								   <form id="uploadimg" class="form-inline" action="uploadimg.jspx" method="post" enctype="multipart/form-data" target="upload-iframe">
							  		<label>上传头像:</label>&nbsp;<input type="file" name="file" id="file"/>
							  		<input class="btn" type="submit" value="上传" id="ok" title="头像"/>
			  				</form>
			  				<iframe id="upload-iframe" name="upload-iframe" width= "0" height= "0" frameborder= "0"></iframe>
			  				</div>
			
			  				<div class="well">
							    <form id="info" class="form-horizontal" method="post" action="javascript:;">
								    <fieldset>
								    <div class="control-group">
								    <label class="control-label" for="input01">学号</label>
								    <div class="controls">
								    <input type="text" class="input-xlarge" id="input01" value="<s:property value='candidate.studentid'/>" title="学号"/>
								    </div>
								    </div>
			
								    <div class="control-group">
								    <label class="control-label" for="input02">姓名</label>
								    <div class="controls">
								    <input type="text" class="input-xlarge" id="input02" value="<s:property value='candidate.name'/>" title="姓名"/>
								    </div>
								    </div>
			
								    <div class="control-group">
								    <label class="control-label" for="input03">性别</label>
								    <div class="controls">
								    <label class="radio inline">
								    	男<input type="radio" <s:property value='candidate.sex == 1 ? \'checked=checked\' : \'\''/> name="sex" id="radio1" value="1"/>
								    </label>
								    <label class="radio inline">
								    	女<input type="radio" <s:property value='candidate.sex == 0 ? \'checked=checked\' : \'\''/> name="sex" id="radio2" value="0" title="性别"/>
								    </label>
								    </div>
								    </div>
			
								    <div class="control-group">
								    <label class="control-label" for="input04">出生日期</label>
								    <div class="controls">
								    <input type="text" class="input-xlarge" id="input04" value="<s:property value='candidate.birthday'/>" title="出生日期"/>
								    </div>
								    </div>
			
								    <div class="control-group">
								    <label class="control-label" for="input05">民族</label>
								    <div class="controls">
								    <input type="text" class="input-xlarge" id="input05" value="<s:property value='candidate.nation'/>" title="民族"/>
								    </div>
								    </div>
			
								    <div class="control-group">
								    <label class="control-label" for="input06">政治面貌</label>
								    <div class="controls">
								    <select class="span3" id="input06" title="政治面貌">
								    	<option value="0">请选择</option>
						                <option value="1" <s:property value='candidate.politics == 1 ? \'selected=selected\' : \'\''/>>党员</option>
						                <option value="2" <s:property value='candidate.politics == 2 ? \'selected=selected\' : \'\''/>>预备党员</option>
						                <option value="3" <s:property value='candidate.politics == 3 ? \'selected=selected\' : \'\''/>>团员</option>
						                <option value="4" <s:property value='candidate.politics == 4 ? \'selected=selected\' : \'\''/>>其他</option>
					              	</select>
								    </div>
								    </div>
			
								    <div class="control-group">
								    <label class="control-label" for="input07">学院</label>
								    <div class="controls">
								    <input type="text" class="input-xlarge" id="input07" value="<s:property value='candidate.college'/>" title="学院"/>
								    </div>
								    </div>
			
								    <div class="control-group">
								    <label class="control-label" for="input08">专业班级</label>
								    <div class="controls">
								    <input type="text" class="input-xlarge" id="input08" value="<s:property value='candidate.major'/>" title="专业班级"/>
								    </div>
								    </div>
								    
								    </fieldset>
							    </form>
						    </div>
						    <div class="form-actions">
								<button class="btn btn-primary span2" id="next" style="margin-left: 180px;">确认修改</button>
							</div>
					    </div>
					    
					    <div class="tab-pane" id="tab2">
					    	<div class="alert alert-success" style="display:none;">
							    <button class="close">×</button>
							    <strong>系统提示：</strong><span id="alertmsg"></span>
			    			</div>
					    	<form class="form-horizontal" method="post" action="javascript:;" id="sitesform">
							    <fieldset>
							    <div class="well">
							    <div class="control-group">
							    	<label class="control-label" for="input09" style="width: 60px;">标题</label>
								   	<div class="controls" style="margin-left: 80px;">
									    <input type="text" class="input-xlarge" id="input09" value="<s:property value='cands.title'/>" title="标题"/>
								    </div>
							    </div>
	
							    <div class="control-group">
							    	<label class="control-label" for="input10" style="width: 60px;">副标题</label>
								    <div class="controls" style="margin-left: 80px;">
									    <input type="text" class="input-xlarge" value="<s:property value='cands.subtitle'/>" id="input10" title="副标题"/>
								    </div>
							    </div>
							    </div>
								<textarea name="content" id="editor_id" style="width: 660px; height: 300px;">
									<s:property value='cands.content'/>
								</textarea>
	
							</fieldset>
						</form>
						
						<div class="form-actions">
									<button class="btn btn-primary span2" id="addcandidate" style="margin-left: 180px;">确认修改</button>
								</div>
					    </div>
				    </div>
				    </div>
				
				
				</div>
  			</div>
		</div>
		<%@ include file="include/footer.jsp" %>
	</div>
	<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../js/welcome.js"></script>
	<script src="../js/jquery.validity.js"></script>
	<script charset="utf-8" src="../js/jquery.validity.lang.zh.js"></script>
	<script type="text/javascript" src="../js/jquery.ui.core.js"></script>
	<script type="text/javascript" src="../js/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="../js/jquery.ui.datepicker.js"></script>
	<script type="text/javascript" src="../js/jquery.ui.datepicker-zh-CN.js"></script>
	<script charset="utf-8" src="../editor/kindeditor.js"></script>
	<script charset="utf-8" src="../editor/lang/zh_CN.js"></script>
	<script type="text/javascript">
	    var editor;
	    KindEditor.ready(function(K) {
	            editor = K.create('textarea[name="content"]', {
				uploadJson : 'upload.jspx',
				allowImageUpload : true,
				items : [
					'undo', 'redo', '|', 'preview', 'cut', 'copy', 'paste',
			        'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
			        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent',
			        'outdent', 'subscript','superscript', 'clearhtml', 'quickformat', 'selectall',
			        '|', 'fullscreen', '/',
			        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'bold',
			        'italic', 'underline', 'lineheight', 'removeformat', '|', 'image',
			        'insertfile', 'table', 'hr', 'link', 'unlink'],
			});
	    }); 
	</script>
	
	<script type="text/javascript">
		$(function() {
			$.welcome($("#welcome"));
			var right = $("#right").height();
			$("#left").height(right);
			
			var result;
			
			$("#sitesform").validity(function() {
				$("#input09").require().maxLength(100);
				$("#input10").maxLength(100);
				result = $.validity.end().valid;
			});
			
			$("#addcandidate").click(function() {
				$("#sitesform").submit();
				if(result) {
					editor.sync();
					var content = $("#editor_id").val().trim();
					if(content == "") {
						alert("内容不能为空！");
						return;
					}
					var title = $("#input09").val().trim();
					var subtitle = $("#input10").val().trim();
					
					$.ajax({
						url : "aeditcandidatesites.jspx",
						type : "POST",
						data : {
							id : '<s:property value="cands.id"/>',
							title : title,
							subtitle : subtitle,
							content : content
						},
						success : function(msg) {
							if(msg == 1) {
								$("#alertmsg").text("修改成功！");
								$(".alert").show();
							} else {
								alert("服务器忙，请稍后再试...");
							}
						}
					});
				}
			});
		});
	</script>
	
	<script type="text/javascript">
	$(function() {
		$("#input04").datepicker({
			changeMonth: true,
			changeYear: true,
			altFormat: "yy-mm-dd",
			yearRange: "1980:2010"
		});
	});
	var imgUrl = "<s:property value='candidate.sites'/>";
   	var imgName = imgUrl.substring(imgUrl.lastIndexOf('/') + 1, imgUrl.length);
   	
   	$("#ok").click(function() {
   		imgUrl = "";
   	});
   	
	$(function() {
	    var path,
	        clip = $("img"),
	        FileReader = window.FileReader;
	    $("#file").change(function() {
	 
	        if (FileReader) {
	            var reader = new FileReader(),
	                file = this.files[0];
	            reader.onload = function(e) {
	                clip.attr("src", e.target.result);
	            };
	            reader.readAsDataURL(file);
	        } else {
	            path = $(this).val();
	            if (/"\w\W"/.test(path)) {
	                path = path.slice(1,-1);
	            }
	            alert(path);
	            clip.attr("src",path);
	            alert(clip[0].src);
	        }
	        $("#seeimg").show();
	        imgName = $(this).val();
	        $("#imgname").text(imgName);
	    });
	    
	    var sex;
	    $(":radio").click(function() {
	    	sex = $(this).val().trim();
	    });
	    
		var result;
		$("#info").validity(function() {
			$("#input01").require().match(/^\d{12}$/, "请输入12位的有效学号！");
			$("#input02").require().maxLength(20);
			$("#input04").require().match("date").range(new Date("1980-01-01"), new Date("2000-12-31"), "日期不正确！");
			$("#input05").require();
			$("#input06").require().greaterThan(0, "必须选择一个！");
			$("#input07").require();
			$("#input08").require();
			
			var sex1 = $("#radio1").attr("checked");
			var sex2 = $("#radio2").attr("checked");
			
			$("#radio2").assert(sex1 || sex2, "必须选择一个！");
			
			var img1 = false;
			var img2 = false;
			var img3 = false;
			var img4 = false;
			if(imgName) {
				if(imgName.substring(0, imgName.indexOf(".")) == $("#input01").val()) {
					img1 = true;
				}
				
				img2 = true;
			}
			
			if(imgUrl == "") {
				imgUrl = $("#upload-iframe").contents().find("#msg").text();
			}
			
			if(imgUrl) {
				if(imgUrl.indexOf(imgName) != -1) {
					img3 = true;
				}
				
				img4 = true;
			}
			$("#ok").assert(img2, "请选择候选人头像!").assert(img4, "请上传候选人头像！").assert(img1 && img3, "头像名称与学号不一致，请检查！");
			
			result = $.validity.end().valid;
		});
		
		$("#next").click(function() {
			$("#info").submit();
			
			if(result) {
				$.ajax({
					url : 'aeditcandidate.jspx',
					type : 'POST',
					data : {
						id : "<s:property value='candidate.id'/>",
						name : $("#input02").val().trim(),
						studentid : $("#input01").val().trim(),
						sex : sex,
						nation : $("#input05").val().trim(),
						birthday : $("#input04").val().trim(),
						college : $("#input07").val().trim(),
						major : $("#input08").val().trim(),
						politics : $("#input06").val().trim(),
						sites : imgUrl
					},
					success : function(msg) {
						if(msg == 1) {
							alert("修改成功");
						} else {
							alert("服务器忙，请稍后再试...");
						}
					}
				});
			}
		});

	});
	
	$(function() {
		$(".close").click(function() {
			$(".alert").hide();
		});
	});
</script>
</body>
</html>